<template>
    <div class="listBody">
        <ul class="list-group">
            <li class="list-group-item" v-for="(item,index) in value" :key="index">
                <div class="rightTop" v-if="deleteLiButton">
                    <el-popconfirm title="确定删除？" @onConfirm="deleteLi(item.id)">
                        <i class="el-icon-delete" slot="reference"></i>
                    </el-popconfirm>
                </div>
                <div
                    class="media"
                    style="color:#000;text-decoration: none;margin-top: 0;"
                    @click="toArticle(item.id)"
                >
                    <div class="media-heading liHeader">{{item.title}}</div>
                    <div class="media-left">
                        <img
                            class="media-object"
                            :src="item.src[0]"
                            style="height:105px;width:190px;border-radius:3px;"
                        />
                    </div>
                    <div class="media-left">
                        <img
                            class="media-object"
                            :src="item.src[1]"
                            style="height:105px;width:190px;border-radius:3px;"
                        />
                    </div>
                    <div class="media-body">
                        <div
                            style="height:100px;-webkit-line-clamp: 5;"
                            class="hiddenText"
                        >{{item.text}}</div>
                    </div>
                </div>
                <div style="margin:5px;">
                    <el-button
                        type="text"
                        icon="el-icon-star-off"
                        @click.once="like(item.id)"
                        ref="likeButton"
                        v-show="funTools.one"
                    >{{item.likeNum}}点赞</el-button>
                    <el-button
                        type="text"
                        icon="el-icon-edit"
                        v-show="funTools.two"
                    >{{item.plNum}}评论</el-button>
                    <el-button
                        type="text"
                        icon="el-icon-share"
                        v-show="funTools.three"
                        @click="share(item.id)"
                    >分享</el-button>
                    <el-button
                        ref="coll"
                        type="text"
                        icon="el-icon-star-off"
                        @click.once="collect(item.id)"
                        v-show="funTools.four"
                    >收藏</el-button>
                </div>
                <div id="app" class="share" v-if="showShare == item.id">
                    <katotoQrcode :qrWidth="100" :qrHeight="100" :codeMsg="codeMsg"></katotoQrcode>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import katotoQrcode from "katoto_qrcode";
export default {
    name: "ulList",
    components: {
        katotoQrcode
    },
    props: {
        value: { type: Array, required: true },
        tool: { type: Array },
        deleteLiButton: { type: Boolean }
    },
    data() {
        return {
            funTools: {
                one: null,
                two: null,
                three: null,
                four: null
            },
            showShare: -1,
            codeMsg: ""
        };
    },
    methods: {
        toArticle(id) {
            this.$router.push({
                path: "/strategy/article",
                query: {
                    id: id
                }
            });
        },
        like(id) {
            if (1) {
                this.value.map((item, index) => {
                    if (item.id == id) {
                        // document.getElementsByClassName("likeButton")[  //js选择器
                        //     index
                        // ].style.color = "red";
                        this.$refs.likeButton[index].$el.style.color = "red";
                        return item.likeNum++;
                    }
                    // console.log(item.id);
                });
            }
        },
        collect(id) {
            if (1) {
                this.$message({
                    message: "收藏成功" + id,
                    type: "success"
                });
                this.value.map((item, index) => {
                    if (item.id == id) {
                        this.$refs.coll[index].$el.style.display = "none";
                    }
                });
            }
            // console.log(id);
        },
        deleteLi(deleteId) {
            var i = this.value.findIndex(x => x.id == deleteId);
            this.value.splice(i, 1);
            // this.axios
        },
        share(id) {
            if (this.showShare == id) {
                this.showShare = -1;
            } else {
                this.showShare = id;
                this.codeMsg = "http://localhost:3030/#/strategy/article/" + id;
            }
        }
    },
    mounted() {
        // console.log(this.tool);
        if (this.tool) {
            this.tool.forEach(item => {
                switch (item) {
                    case "one":
                        this.funTools.one = true;
                        break;
                    case "two":
                        this.funTools.two = true;
                        break;
                    case "three":
                        this.funTools.three = true;
                        break;
                    case "four":
                        this.funTools.four = true;
                        break;

                    default:
                        break;
                }
            });
        }
    }
};
</script>
<style>
div.listBody div.liHeader {
    color: inherit;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
}
div.listBody div.rightTop {
    position: absolute;
    right: 15px;
}
/* 分享 */
div.listBody div.share {
    position: absolute;
    left: 170px;
    top: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    width: 140px;
    height: 140px;
}
</style>
